<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style type="text/css">/*内部样式*/ /* CSS的注释样子和html不同 */
/*
CSS的三大特性:
1.继承性：子元素可以继承父元素的样式(如：颜色、字体等),但个别标签自带效果不受继承影响,
                    如:h1-h6自带字体大小不受影响,超链接a标签自带字体颜色也不受继承影响
2.层叠性：先后给同一个元素加不同的声明，其效果不同的属性会叠加在一起,相同的会根据优先级而定
3.优先级：先后给同一个元素加相同的样式，相同的会根据优先级而定
                     作用范围越小优先级越高 id>class>标签名>继承 , 直接选中优先级高于间接选中(继承属于间接选中)
*/

/*
css样式由选择器和声明{(属性:值)}组成,多条属性和值时用逗号隔开,最后一条声明一般也用分号,每行一个声明可读性好
*/
/*清空默认样式  body自带的8个像素的外边距 */
* {
	margin: 0px;
	padding: 0px;
	margin: 20px auto;
	border: none;
}

#mp {
	height: 100px;
	width: 200px;
	border: 2px solid #f00;
	background-color: #006699;
	color: #fff;
	margin-left: 10px; /* 当前div左外边距为10px */
	padding-left: 10px; /* 当前div左内边距为10px */
	padding-top: 10px;
}

#dd1 {
	color: blue;
}

#id2 {
	color: #000;
}
/*伪类选择器：根据状态选择元素。 */
/*选择未访问过的超链接*/
a:link {
	color: green;
}
/*选择访问过的超链接*/
a:visited {
	color: red;
}
/*选择激活态(正在点)的按钮*/
#b1:active {
	background-color: red;
}
/*选择有焦点(光标闪烁)的文本框*/
#t1:focus {
	background-color: green;
}

h4:hover {
	color: #f00;
	cursor: pointer; /* 鼠标悬停的时候变成小手 */
}

ol>p { /*子类选择器，精确选子代标签*/
	border: 5px solid yellow;
}

ol li { /*派生选择器，可选该路径下所有子类孙类...的li标签*/
	color: blue;
}

.cls { /*class选择器 可多选多*/
	color: green;
}

.w100 {
	height: 100px;
}

#id { /*id选择器，只能选择一个唯一id*/
	color: blue;
}

h2 { /*标签选择器，所有该标签有效*/
	color: red;
	border: 5px solid red;
}
/*选择器组 */
#dd3, .cc1 {
	background-color: yellow;
}
/*属性选择器*/
input[type='password'] {
	background-color: pink;
}

#buju {
	border: 2px solid red;
	height: 50px;
	width: 50%;
	padding: 30px 40px;
}

#beijing { /*背景图片撑不起div*/
	height: 300px;
	width: 500px;
	margin: 0px auto;
	padding: 24px 18px;
	background-color: #ccc;
	background-image: url("../images/itemCat/study_computer_img1.png");
	background-repeat: no-repeat;
	background-position: 130px 0px;
	background-size: 330px 350px;
}

#font {
	width: 41%;
	font-size: 24px;
	font-family: "楷体";
	font-weight: bold;
	font-style: italic;
}

#text {
	height: 50px;
	color: red;
	/* 行高  可以实现文本的垂直居中 */
	line-height: 50px;
	text-align: center;
	text-decoration: underline;
	/* 文本阴影 颜色 x偏移 y偏移 浓度(值越小越清晰)*/
	text-shadow: green -5px -5px 1px;
}

#border {
	height: 300px;
	width: 300px;
	line-height: 300px;
	font-size: 15px;
	border-top: 10px solid red;
	border-right: 10px dotted blue;
	border-bottom: 10px double green;
	border-left: 10px dashed gray;
	border-radius: 160px;
}

#overflow {
	height: 300px;
	width: 300px;
	background-color: red;
	color: #fff;
	overflow: auto;
}

#overflow>div {
	height: 250px;
	width: 350px;
	background-color: green;
}

#display {
	text-align: center;
}

#display span {
	border: 2px solid blue;
	display: block;
	width: 200px;
	height: 100px;
	margin-top: 20px;
	margin-bottom: 10px;
}

#display a {
	display: block;
	width: 200px;
	height: 50px;
	color: #fff;
	/* 渐变背景色  chrome浏览器生效 */
	background: -webkit-linear-gradient(top, #006699 0%, #990066 100%);
	line-height: 50px;
	text-align: center;
	text-decoration: none;
}

.inline-block {
	display: inline-block;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

.block {
	display: block;
}

#acc {
	background-color: #0aa1ed;
	width: 132px;
	height: 40px;
	display: block;
	color: white;
	text-decoration: none;
	text-align: center;
	line-height: 40px;
	border-radius: 20px;
}

.img1 {
	/* 垂直对齐方式  
	baseline基线对齐
	top 上对齐
	middle 中间对齐
	bottom 下对齐
	*/
	vertical-align: middle;
}

#float {
	text-align: center;
}

.cll {
	float: left;
	/* 列表属性：list-style-type：none/upper-roman(罗马数字)/square（正方形） */
	list-style-type: none;
	/* list-style-image: url("");列表前的点换为图片 */
	width: 100px;
}

#gd1 {
	width: 100px;
	border: 2px solid red;
}

#gd1>.gd2 {
	height: 48px;
	width: 48px;
	border: 1px solid black;
	float: left;
}

#gd3 {
	/* 克服高度坍塌 */
	clear: both;
	height: 2px;
	background-color: yellow;
}

#d1 {
	height: 100px;
	width: 100px;
	background-color: red;
	line-height: 100px;
	text-align: center;
	float: right;
}

#d2 {
	height: 300px;
	width: 300px;
	background-color: blue;
	line-height: 300px;
	text-align: center;
	float: right;
}

#d3 {
	height: 200px;
	width: 200px;
	background-color: green;
	line-height: 200px;
	text-align: center;
	float: right;
}

#d4 {
	hight: 50px;
	width: 600px;
	background-color: #0ff;
	text-align: center;
}

#d5 {
	hight: 50px;
	width: 600px;
	background-color: yellow;
	text-align: center;
	clear: both;
}

#position {
	text-align: center;
}

#position>div {
	height: 50px;
	width: 200px;
	border: 10px solid pink;
	position: fixed;
	top: 800px;
	right: 0px;
	text-align: center;
	line-height: 50px;
	color: red;
}

.c1 {
	height: 500px;
	width: 500px;
	background-color: red;
	position: relative;
	top: 200px;
	left: 200px;
	z-index: 1;
}

.c2 {
	height: 500px;
	width: 500px;
	background-color: green;
	position: relative; /*不设置偏移量，只是为了便于
		  子元素以此为目标做绝对定位。 */
}

.c3 {
	height: 250px;
	width: 250px;
	background-color: blue;
}

.c4 {
	height: 250px;
	width: 250px;
	background-color: yellow;
	position: absolute;
	top: 200px;
	left: 200px;
}

.c5 {
	height: 100px;
	width: 100px;
	background-color: pink;
	position: absolute;
	top: 200px;
	left: 200px;
	z-index: 1;
}

#adl:hover {
	position: relative;
	left: 2px;
	top: -2px;
}
</style>
<link rel="stylesheet" href="wb.css">
<!--外部样式-->
</head>
<body>
	<h1>一、三种样式的写法</h1>
	<h2 style="color: red">内联样式（红色）</h2>
	<!--内联样式-->
	<h2 id="dd1">内部样式（蓝色） d1外部样式比内部样式近，就近原则所以绿了</h2>
	<h2 id="dd2">外部样式（绿色）</h2>

	<h1>二、选择器</h1>
	<h2>1.标签选择器</h2>
	<h2 id="id">2.ID选择器,标签选择器颜色被覆盖</h2>
	<h2 class="cls w100">3.class选择器1，覆盖掉标签选择器的颜色</h2>
	<h3 class="cls w100" id="id2">class选择器2,颜色被id选择器覆盖</h3>
	<h2>4.派生选择器</h2>
	<ol>
		<li>外层列表li</li>
		<li>我有内层列表</li>
		<ul>
			<li>内层列表li</li>
			<li>内层列表li</li>
			<p>凑数的p标签</p>
		</ul>
		<li>外层列表li</li>
		<p>凑数的p标签</p>
	</ol>
	<h2>5.子类选择器:只能选择子代标签，比如上述的p标签</h2>
	<h2>6.伪类选择器:</h2>
	<h4>hover:鼠标放在上面激活样式</h4>
	<a href="http://www.baidu.cn">未选择过的a标签为绿色</a>
	<a href="http://www.tmooc.cn">a标签点过后变红</a>
	<h4>
		<input type="button" value="点我" id="b1" />
	</h4>
	<h2>7.属性选择器:</h2>
	<h4>
		<input type="text" id="t1" />
	</h4>
	<h4>
		<input type="password" />
	</h4>
	<h2>8.选择器组:写出一组选择器（任意选择器形式），中间用，隔开，选中 其中每个选择器所对应目标的并集</h2>
	<div id="dd3">#dd3</div>
	<span class="cc1">.cc1</span>

	<h1>三、CSS常用属性</h1>
	<h2>1.布局相关属性</h2>
	<div id="buju">width,height,margin,padding</div>
	<div id="mp">外边距margin和内边距padding的演示</div>
	<h2>2.背景相关属性</h2>
	<div id="beijing">background-color,image,repeat,position,size</div>
	<h2>3.字体相关属性</h2>
	<div id="font">font-size,family,weight,style</div>
	<h2>4.文本相关属性</h2>
	<div id="text">color；line-height；text-align,decoration</div>
	<h2>5.边框相关属性</h2>
	<div id="border">border:width style color;border-radius</div>
	<h2>6.常见复杂属性</h2>
	<h3>6.1 overflow溢出属性</h3>
	<div id="overflow">
		overflow:visible/hidden/scroll/ auto(溢出时出滚动条)
		<div></div>
	</div>
	<h3>6.2 display控制元素显示方式</h3>
	<div id="display">
		display:none/block/inline/line-block; <span>span标签设置宽高外边距</span> <a
			href="login.html" id="adl">a标签实现登录功能</a>
	</div>
	<div>
		<a href="" id="acc">查看详情</a>
		<div class='inline-block'>div1</div>
		<div class="inline-block">div2</div>
		<div class='inline-block'>div3</div>
		<span class='block'>span1</span> <span class='block'>span2</span> <span
			class=block"">span3</span>
	</div>
	<img src="../img/02.png" class="img1">
	<input type="text" value="这是文本框">
	<h3>6.3 float浮动</h3>
	<h4>浮动多用于块级元素横向显示</h4>
	<ul>
		<li class="cll">首页</li>
		<li class="cll">免费课</li>
		<li class="cll">直播课</li>
		<li class="cll">会员课</li>
		<li class="cll">培优课</li>
	</ul>
	<br>
	<div id="float">float:left/right;clear:both;</div>
	<div id="d1">浮动DIV1</div>
	<div id="d2">浮动DIV2</div>
	<div id="d3">浮动DIV3</div>
	<div id="d4">DIV4</div>
	<div id="d5">DIV5清除浮动</div>
	<div id="gd1">
		<div class="gd2"></div>
		<div class="gd2"></div>
		<div class="gd2"></div>
		<div class="gd2"></div>
		<div id="gd3"></div>
	</div>

	<h3>6.4 position定位</h3>
	<div id="position">
		position:absolute/relative/fixed解封方向属性；z-index相同时后渲染的组件在相同位置会覆盖先渲染的组件;
		<!--absolute根据其最近的position父类来定位，原来的位置会被其他
	元素取代，relativa的原位置永远不会被其他元素取代，它永远参考它
	原来的位置来定位-->
		<div>
			相对窗口定位fixed<a href="#">回到TOP</a>
		</div>
	</div>
	<div class="c1">DIV1</div>
	<div class="c2">
		DIV2
		<div class="c3">
			DIV3
			<div class="c5">DIV5</div>
		</div>
		<div class="c4">DIV4</div>
	</div>

</body>
</html>